import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar } from "react-vant";
import { ShareO } from "@react-vant/icons";
import axios from "axios";
import './index.css'
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [kstab,setkstab]=useState<any>([])
  const [AlldepartmentsInd,setAlldepartmentsInd]=useState(0)
  const render=()=>{
    axios.get('/api/kstab').then((resp)=>{
      setkstab(resp.data.kstab)
    })
  }
  useEffect(()=>{
    render()
  },[])
  const AlldepartmentsChange=(index:number)=>{
    setAlldepartmentsInd(index)
  }
  const AlldepartmentsDetail=()=>{
    navigate("/alldepartmentsitem")
  }
  return (
    <div>
      <NavBar title="科室选择" onClickLeft={() => navigate(-1)} />
      <div className="kstabbox">
        <div className="kstabboxleft">
          {kstab.length>0 && kstab.map((item:any,index:number)=><div className={index==AlldepartmentsInd ? 'kstabboxleftactive' : ''} onClick={()=>AlldepartmentsChange(index)}>{item.title}</div>)}
        </div>
        <div className="kstabboxright">
          {kstab.length>0 && kstab[AlldepartmentsInd].children.word.map((item:string,index:number)=><div onClick={()=>AlldepartmentsDetail()}>{item}</div>)}
        </div>
      </div>
    </div>
  );
};
export default Index;
